<template>
  <div class="po">
    <h2>失寻中心</h2>

    <form class="kl">
      <div class="op">
        <p>+</p>
      </div>
      <div>
        <span>宠物种类:</span>
        <input type="text" />
        <hr />
      </div>

      <div>
        <span>宠物品种:</span>
        <input type="text" />
        <hr />
      </div>
      <div>
        <span>毛色:</span>
        <input type="text" />
        <hr />
      </div>
      <div>
        <span>地址:</span>
        <input type="text" />
        <hr />
      </div>
      <div>
        <span>详情:</span>
        <input type="text" />
        <hr />
      </div>
      <div>
        <router-link :to="{ name: 'MakingFriends' }">
          <button>发布</button>
        </router-link>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: "lostcenter",
};
</script>

<style lang='less' scoped>
* {
  margin: 0;
  padding: 0;
}
.po {
  width: 100%;
  min-height: 100vh;
  background: url("../img/custom\ –\ 8.png") center center no-repeat;
  background-size: 100% 100%;
  margin-bottom: 50px;
  h2 {
    text-align: center;
    color: palevioletred;
  }
}
.op {
  position: relative;
  top: 20px;
  margin: 0 auto;
  width: 242px;
  height: 181px;
  border-radius: 30px;
  background-color: antiquewhite;

  // background-size: 322px 181px;
  // background-image: url("../img/NoPath\ -\ 副本\ \(14\).png");
  p {
    // background-color: aqua;
    text-align: center;
    width: 100px;
    height: 100px;
    font-size: 120px;
    margin: 0px 0px 0px 65px;
    color: pink;
  }
}

.kl {
  position: relative;
  // top: 10px;
  width: 322px;
  height: 600px;
  margin: 0 auto;
  border-radius: 30px;
  background-color: #f7e0d3;
  button {
    width: 250px;
    height: 50px;
    border-radius: 20px;
    border: none;
  }
}

input {
  background-color: transparent;
  border: none;
  outline: none;
}
.kl > div {
  position: relative;
  top: 30px;
  margin-left: 40px;
  margin-top: 15px;
}
hr {
  margin-top: 15px;
  width: 250px;
}
</style>